<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Components</title>
    <link rel="stylesheet" href="./src/mp-design-tokens/__import.css" />
  </head>
  <body>
    <mp-text textstyle="h2" text="Web components">=</mp-text>
    <mp-card>
      <mp-stack>
      <mp-stack orientation="row" justifycontent="space-between" alignitems="center">
      <mp-stack>
      <mp-text text="Label" textstyle="body1"></mp-text>
      <mp-text text="There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection. If the label is not rendered on the page, assistive technologies should still announce it." textstyle="caption"></mp-text>
    </mp-stack>
    <mp-switch/></mp-switch>
  </mp-stack>
  <mp-stack>
    <mp-stack orientation="row" justifycontent="space-between" alignitems="center">
    <mp-stack>
    <mp-text text="Label" textstyle="body1"></mp-text>
    <mp-text text="There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection. If the label is not rendered on the page, assistive technologies should still announce it." textstyle="caption"></mp-text>
  </mp-stack>
  <mp-button
  text="Primary"
  buttonstyle="brand"
  iconleft="home"
></mp-button></mp-stack>
<mp-stack>
  <mp-stack orientation="row" justifycontent="space-between" alignitems="center">
  <mp-stack>
  <mp-text text="Label" textstyle="body1"></mp-text>
  <mp-text text="There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection. If the label is not rendered on the page, assistive technologies should still announce it." textstyle="caption"></mp-text>
</mp-stack>
<mp-button
text="Primary"
buttonstyle="secondary"
iconleft="home"
></mp-button></mp-stack>
<mp-stack>
  <mp-stack orientation="row" justifycontent="space-between" alignitems="center">
  <mp-stack>
  <mp-text text="Label" textstyle="body1"></mp-text>
  <mp-text text="There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection. If the label is not rendered on the page, assistive technologies should still announce it." textstyle="caption"></mp-text>
</mp-stack>
<mp-button
text="Primary"
buttonstyle="text"
iconleft="home"
></mp-button></mp-stack>
<mp-stack>
  <mp-stack orientation="row" justifycontent="space-between" alignitems="center">
  <mp-stack>
  <mp-text text="Label" textstyle="body1"></mp-text>
  <mp-text text="There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection. If the label is not rendered on the page, assistive technologies should still announce it." textstyle="caption"></mp-text>
</mp-stack>
<mp-button
text="Primary"
buttonstyle="danger"
iconleft="home"
></mp-button></mp-stack>


      </mp-card>





    <script type="module" src="./src/components/mp-text.js"></script>
    <script type="module" src="./src/components/mp-button.js"></script>
    <script type="module" src="./src/components/mp-icon.js"></script>
    <script type="module" src="./src/components/mp-card.js"></script>
    <script type="module" src="./src/components/mp-stack.js"></script>
    <script type="module" src="./src/components/mp-divider.js"></script>
    <script type="module" src="./src/components/mp-form.js"></script>
    <script type="module" src="./src/components/mp-switch.js"></script>
    <script type="module" src="./src/components/mp-list.js"></script>
  </body>
</html>
